<template>
    <div class="app-container">
        <Tabs :active-value="queryParams.status" :tabs="tabs" @change="changeTab" :isShowCount=true></Tabs>
        <!-- <el-card class="selsctCard">
            <div class="headBox">
                <div class="headValue" :class="item.name === listValue ? 'bckColr' : ''" v-for="(item, index) in list"
                    :key="index" @click="titleCahnge(item)">
                    <span>{{ item.name }}</span>
                    <span>(</span>
                    <span>{{ item.value }}</span>
                    <span>)</span>
                </div>
            </div>
        </el-card> -->
        <div v-loading="loading">
            <SearchForm @reset="resetQuery" @search="handleQuery" ref="searchForm">
                <el-form-item label="消息类型:" prop="messageType">
                    <el-select v-model="queryParams.type" clearable>
                        <el-option :label="item.dictLabel" :value="item.dictSort"
                            v-for="(item, index) in busFlowTypeList" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="发送方式:" prop="pushType">
                    <el-select v-model="queryParams.pushType" placeholder="请选择发送方式" clearable>
                        <el-option v-for="item in company" :label="item.label" :value="item.value" :key="item.deptId">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="发送时间:" prop="sendTime">
                    <el-date-picker type="datetime" placeholder="选择发送时间" value-format='yyyy-MM-dd HH:mm:ss'
                        style="width: 100%;" v-model="queryParams.sendTime">
                    </el-date-picker>
                </el-form-item>
            </SearchForm>

            <div class="card-wrap card-padding">
                <div class="tableBox">
                    <el-table fit :data="definitionList" border v-if="tableCloumns.length > 0">
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button @click="handleReadImage(scope.row)" type="text" size="small"
                                    v-hasPermi="['messageManagement:list:see']">查看</el-button>
                            </template>
                        </el-table-column>
                        <TableCloumn v-for="item in tableCloumns" :cellOptions="item"></TableCloumn>
                    </el-table>

                    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getList" />
                </div>
            </div>
        </div>
        <el-dialog title="查看" :visible.sync="open" append-to-body class="form-dialog" width="45%" :loading="loading1">
            <el-descriptions :column="1">
                <el-descriptions-item label="消息通知">{{ form.title }}</el-descriptions-item>
                <el-descriptions-item label="发送方式">
                    <span v-if="form.pushType==1">短信</span>
                    <span v-if="form.pushType==2">邮件</span>
                    <span v-if="form.pushType==3">站内信</span>
                </el-descriptions-item>
                <el-descriptions-item label="消息内容">
                        <span style="color:#1890ff;cursor:pointer" @click="goIfoDate(form)">{{ form.content }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="创建时间">{{ form.sendTime }}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
</template>

<script>
import * as apis from "@/api/messageManagement/index.js";
import SearchContent from "@/components/SearchContent/index.vue";
import Cookies from "js-cookie";
import TableCloumn from "@/views/finance/manage/tableColumn/index.vue";
import Tabs from "@/components/Tabs/index.vue"
export default {
    name: "MessageList",
    dicts: ["bus_flow_type"],
    components: {
        SearchContent,
        TableCloumn,
        Tabs
    },

    data() {
        return {
            // 遮罩层
            loading: true,
            loading1: true,
            // 总条数
            total: 0,
            // 流程定义表格数据
            definitionList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                id: Cookies.get("userId"),
                pushType: null,
                status: 2,
                type: null,
                sendTime: '',
            },
            // xml
            flowData: {},
            listValue: "",
            tabs: [
                {
                    label: '全部',
                    value: 2,
                    num: 2,
                    count:0,
                },
                {
                    label: '已读',
                    value: 1,
                    num: 1,
                    count:0,
                }, {
                    label: '未读',
                    value: 0,
                    num: 0,
                    count:0,
                },
            ],
            dictType: '',
            dicts: {
                claimStatusList: [
                    {
                        label: "未认领",
                        value: "0",
                    },
                    {
                        label: "已认领",
                        value: "1",
                    },
                ],
            },
            tableCloumns: [
                {
                    label: "消息内容",
                    prop: "content",
                },
                {
                    label: "客户名称",
                    prop: "customName",
                },
                {
                    label: "车牌号",
                    prop: "carNo",
                },
                {
                    label: "消息类型",
                    prop: "title",
                },
                {
                    label: "发送方式",
                    prop: "pushType",
                    format: (row) => {
                        if (row.pushType == 1) {
                            return '短信'
                        } else if (row.pushType == 2) {
                            return '邮件'
                        } else if (row.pushType == 3) {
                            return '站内信'
                        }
                    },

                },
                {
                    label: "接收人",
                    minWidth: "100px",
                    prop: "receiveName",
                },

                {
                    label: "状态",
                    prop: "status",
                    minWidth: "150px",
                    format: (row) => {
                        if (row.status == 0) {
                            return '未读'
                        } else if (row.status == 1) {
                            return '已读'
                        }
                    },
                },
                {
                    label: "发送时间",
                    prop: "sendTime",
                    minWidth: "150px",
                },
            ],
            company: [
                { label: '全部', value: 0 },
                { label: '短信', value: 1 },
                { label: '邮件', value: 2 },
                { label: '站内信', value: 3 },
            ], //公司
            open: false, // 弹框状态
            form: {
                time: '111',
            },
            busFlowTypeList: [],
        };
    },
    async created() {
        this.loading = true;
        this.getList();
        this.busFlowTypeList = await this._getDicts("message_type");
    },
    activated(){
        this.getList();
    },
    mounted() { },
    methods: {
        // 跳转详情
        goIfoDate(info){
            this.loading1 = true
            console.log(info,1111111)
            const data={
                title:info.title,
                workOrderId:info.workOrderId,
            }
            apis.messageRouterGet(data).then((res)=>{
                console.log(res,'titletitletitle')
                if(res.code==200){
                    this.loading1 = false
                    const data = res?.data
                    switch (info.title){    
                        case '审批通知': this.$router.push({ path: '/workflow/examine/details', query: {modelId:data?.id,name:data?.name,category:data?.category,processId:data?.id,taskId:data?.taskId,activityId:data?.activityId,flag:2,isSuspended:false} })
                        break; 
                        case '审批结果通知': this.$router.push({ path: '/workflow/examine/details', query: { modelId:data?.id,name:data?.name,category:data?.category,processId:data?.id,taskId:data?.taskId,activityId:data?.activityId,flag:1,isSuspended:false,status:readonly} })
                        break; 
                        case 'GPS告警通知':
                            switch(res.workOrderType){
                                case 12 : this.$router.push({ path: '/clgl/GPSManage/GPSInstall', query: { carIds:data?.carId,workOrderType:data?.workOrderType,type: 'disabled',pageType:'GPS安装工单详情'} })
                                break;
                                case 13 : this.$router.push({ path: '/clgl/GPSManage/GPSRenewal', query: { carIds:data?.carId,workOrderType:data?.workOrderType,type: 'disabled',pageType:'GPS续费工单详情'} })
                                break;
                                case 14 : this.$router.push({ path: '/clgl/GPSManage/GPSFix', query: { carIds:data?.carId,workOrderType:data?.workOrderType,type: 'disabled',pageType:'GPS维修工单详情'} })
                                break;
                                case 15 : this.$router.push({ path: '/clgl/GPSManage/GPSRemove', query: { carIds:data?.carId,workOrderType:data?.workOrderType,type: 'disabled',pageType:'GPS拆除工单详情'} })
                                break;
                                case 17 : this.$router.push({ path: '/clgl/GPSManage/GPSCheck', query: { carIds:data?.carId,workOrderType:data?.workOrderType,type: 'disabled',pageType:'GPS排查工单详情'} })
                                break;
                            }
                        break; 
                        case 'GPS到期通知': 
                                switch(res.workOrderType){
                                case 12 : this.$router.push({ path: '/clgl/GPSManage/GPSInstall', query: { carIds:data?.carId,workOrderType:data?.workOrderType,type: 'disabled',pageType:'GPS安装工单详情'} })
                                break;
                                case 13 : this.$router.push({ path: '/clgl/GPSManage/GPSRenewal', query: { carIds:data?.carId,workOrderType:data?.workOrderType,type: 'disabled',pageType:'GPS续费工单详情'} })
                                break;
                                case 14 : this.$router.push({ path: '/clgl/GPSManage/GPSFix', query: { carIds:data?.carId,workOrderType:data?.workOrderType,type: 'disabled',pageType:'GPS维修工单详情'} })
                                break;
                                case 15 : this.$router.push({ path: '/clgl/GPSManage/GPSRemove', query: { carIds:data?.carId,workOrderType:data?.workOrderType,type: 'disabled',pageType:'GPS拆除工单详情'} })
                                break;
                                case 17 : this.$router.push({ path: '/clgl/GPSManage/GPSCheck', query: { carIds:data?.carId,workOrderType:data?.workOrderType,type: 'disabled',pageType:'GPS排查工单详情'} })
                                break;
                            }
                        break; 
                        case '维修通知': this.$router.push({ path: '/cwgd/maintenanceDetails', query: {type: 'view',businessDataId: data?.businessDataId,carId: data?.carId,id: data?.id,flowId: data?.flowId} })
                        break; 
                        case '报废通知': this.$router.push({ path: '/cwgd/maintenanceDetails', query: {type: 'view',businessDataId: data?.businessDataId,carId: data?.carId,id: data?.id,flowId: data?.flowId} })
                        break; 
                        case '出险通知': this.$router.push({ path: '/cwgd/maintenanceDetails', query: {type: 'view',businessDataId: data?.businessDataId,carId: data?.carId,id: data?.id,flowId: data?.flowId} })
                        break; 
                        case '更换轮胎通知': this.$router.push({ path: '/cwgd/replaceTireDetails', query: {type: 'view',businessDataId: data?.businessDataId,carId: data?.carId,id: data?.id,flowId: data?.flowId} })
                        break; 
                        case '保养通知': this.$router.push({ path: '/cwgd/maintainDetails', query: {   type: 'view',businessDataId: data?.businessDataId,carId: data?.carId,flowId: data?.flowId,id: data?.id,} })
                        break; 
                        case '年检逾期通知': this.$router.push({ path: '/cwgd/inspectDetails', query: {id: data?.id,carId: data?.carId,businessDataId: data?.businessDataId,types: 'view',flowId: data?.flowId,} })
                        break; 
                        case '还车通知': this.$router.push({ path: '/ReturnCar/CommitReturnCar', query: {orderNo:data?.orderNumber} })
                        break; 
                        case '取车通知': this.$router.push({ path: '/CarInventory/OutInventory', query: {id:data?.id,viewType:0} })
                        break; 
                        case '账单催收通知': this.$router.push({ path: '/finance/collectDetail', query: {id:data?.id} })
                        break; 
                        case '还车逾期催收通知': this.$router.push({ path: '/finance/collectDetail', query: {id:data?.id} })
                        break; 
                        case '违章通知': this.$router.push({ path: '/clgl/illegalManage/IllegalListDetail', query: {carViolationId:data?.carViolationId}})
                        break; 
                        case '新车投保通知': this.$router.push({ path: '/cwgd/newCarInsuranceDetails', query: { id: data?.id,carId: data?.carId,channels: data?.insuranceChannels,flowId: data?.flowId,} })
                        break; 
                        case '档案邮寄通知': this.$router.push({ path: '', query: {} })
                        break; 
                }
                }
                
            })
        },
        changeTab(id){
            console.log(id,2222)
            this.queryParams.status = id
            this.queryParams.businessType = "";
            this.queryParams.pageNum = 1;
            this.queryParams.pageSize = 10;
            this.$refs.searchForm.resize();
            this.getList();
        },
        // 按钮切换
        titleCahnge({ name, dictValue, id }) {
            console.log(dictValue, "dictValue");
            this.listValue = name;
            this.queryParams.businessType = "";
            this.queryParams.pageNum = 1;
            this.queryParams.pageSize = 10;
            console.log(id, 'dictValuedictValuedictValue')
            this.queryParams.status = id == 2 ? '' : id;
            this.$refs.searchForm.resize();
            this.queryParams.category = dictValue;
            this.getList();
        },

        /** 查询列表 */
        getList() {
            this.loading = true;
            console.log(this.queryParams,222222)
            let info = JSON.parse(JSON.stringify(this.queryParams))
            info.readStatus = this.queryParams.status == 2 ? '' : this.queryParams.status;
            info.status =''
            apis?.messageList(info)
                .then((response) => {
                    if (response.code == 200) {
                        this.loading = false;
                        this.definitionList = response.rows;
                        this.total = response.total;
                    }
                })
                .finally(() => (this.loading = false));
            apis?.messageCount().then((res) => {
                if (res.code == 200) {
                    this.tabs.map((item) => {
                        res?.data.map((info) => {
                            if (item.value == info.readStatus) {
                                item.count = info.count
                                console.log(info.readStatus, 1111)
                            }
                        })
                    })
                    this.tabs[0].count = res?.data[0]?.count + res?.data[1]?.count
                }
            })
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                id: Cookies.get("userId"),
                category: null,
                businessType: "",
                businessId: null,
            };
            this.listValue = ''
            this.handleQuery();
        },

        /** 消息查看 */
        handleReadImage(info) {
            this.open = true
            apis.messageListDetail(info.id).then((res)=>{
                if(res.code==200){
                    this.form = res.data
                }
            })
            apis.messageUpdate({id:info.id,readStatus:1}).then((res)=>{

            })
        },
    },
};
</script>
<style scoped lang="scss">
.selsctCard {
    margin-bottom: 20px;
    border-radius: 8px;

    .headBox {
        width: 100%;
        min-height: 30px;
        // height: 30px;
        line-height: 30px;
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        // justify-content: space-between;

        .headValue {
            // width: 15%;
            padding: 0 13px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 14px;
            border: 1px solid #ccc;
            border-radius: 5px;
            cursor: pointer;
        }

        .bckColr {
            color: #fff;
            background: #1890ff;
        }
    }
}
</style>